<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>07.vue中的样式-class</title>
  <script src="../../lib/vue.js"></script>
  <style>
    .red {
      color: red;
    }

    .thin {
      font-weight: 200;
    }

    .italic {
      font-style: italic;
    }

    .active {
      letter-spacing: 0.5em;

    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 第一种：直接传递一个数组，class 需使用 :class -->
    <!-- 数组元素是 class Name 的字符串 -->
    <h1 :class="['red','thin','italic']">这是一个很大的H1</h1>
    <!-- 第二种：三元表达式 -->
    <h1 :class="['thin','italic',flag?'active':'red']">这是一个很大的H1</h1>
    <!-- 第三种：对象的写法 -->
    <h1 :class="['thin','italic',{'active':flag},{'red':!flag}]">这是一个很大的H1</h1>
    <!-- 对象的属性可带引号，也可以不带 -->
    <h1 :class="{red:true,active:true,thin:false}">这是一个很大的H1</h1>
    <!-- 这个对象 可以是 Vue::vm.data 中的数据 -->
    <h1 :class="clsObj">这是一个很大的H1</h1>

  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      flag: true,
      clsObj: { red: true, active: true, thin: false }
    }
  })
</script>

</html>